<template>
        <el-scrollbar style="height:100%;">
            <div class="container p-40">
                <el-form
                    v-loading="loading"
                    ref="basicForm"
                    :rules="rules"
                    :model="basicForm"
                    label-width="100px"
                >
                    <p class="f-17 m-b-20">基本信息</p>
                    <el-row :gutter="40">
                        <el-col :span="8">
                            <el-form-item label="楼宇名称" prop="fkBuildingId">
                                <el-select
                                    v-model="basicForm.fkBuildingId"
                                    @change="buildingChange"
                                >
                                    <el-option
                                        v-for="item in building"
                                        :key="item.pkBuildingId"
                                        :value="item.pkBuildingId"
                                        :label="item.buildingName"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属区域">
                                <el-input
                                    :disabled="true"
                                    :value="basicForm.fkRegionId | commonFilter(area)"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属管理处">
                                <el-input
                                    :disabled="true"
                                    :value="
                                        basicForm.fkAdministrationId
                                            | commonFilter(property)
                                    "
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="经手人" prop="fkHandleId">
                                <el-input
                                    placeholder="请输入经手人"
                                    v-model="basicForm.fkHandleId"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="维修时间" prop="repairDate">
                                <el-date-picker
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="date"
                                    placeholder="请选择维修时间"
                                    v-model="basicForm.repairDate"
                                    style="width: 100%"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="维修内容" prop="repairContent">
                                <el-input
                                    type="textarea"
                                    :rows="3"
                                    maxlength="2000"
                                    show-word-limit
                                    v-model="basicForm.repairContent"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注情况">
                                <el-input
                                    type="textarea"
                                    maxlength="2000"
                                    show-word-limit
                                    :rows="3"
                                    v-model="basicForm.remarks"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="23">
                            <el-form-item label="现场图片" prop="areaNumberId">
                                <up-img
                                    ref="upImg"
                                    v-model="basicForm.scenePhotos"
                                    imgWidth="150px"
                                    imgHeight="100px"
                                    :imgLength="7"
                                >
                                </up-img>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-row justify="center" style="margin-top: 1rem">
                    <el-col :span="4" :offset="10">
                        <el-button
                            type="primary"
                            @click="submitForm"
                            :loading="hasSubmit"
                            >确定</el-button
                        >
                        <el-button @click="colse">取消</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-scrollbar>
</template>

<script>
import {
    getMaintenanceById,
    updateMaintenanceRecords,
    addMaintenanceRecords,
} from "@/api/house/repair/repair";
import {
    getOneAll,
    getTwoAll,
    selectNameToId,
    UploadImage,
} from "@/api/common/common.js";
import upImg from '@/components/upImg'
import { getBuildingName } from "@/api/house/building/building.js";

export default {
    components: {
        upImg
    },
    data() {
        return {
            hasSubmit: false,
            isUpdate: false,
            loading: false,
            imageUrl: "",
            area: [],
            property: [],
            basicForm: {
                fkBuildingId: null,
                scenePhotos: [],
            },
            building: [],
            rules: {
                fkBuildingId: [
                    {
                        required: true,
                        message: "请选择楼宇名称",
                    },
                ],
                fkHandleId: [
                    {
                        required: true,
                        message: "请输入经手人姓名",
                    },
                ],
                repairDate: [
                    {
                        required: true,
                        message: "请选择维修时间",
                    },
                ],
                repairContent: [
                    {
                        required: true,
                        message: "请输入维修内容",
                    },
                ],
            },
        };
    },
    methods: {
        loadData(id) {
            getMaintenanceById(id).then((res) => {
                this.basicForm = res.data;
            }).finally(_ => {
                this.loading = false;
            });
        },
        loadSelect() {
            getBuildingName().then((res) => {
                this.building = res.data;
            });
        },
        buildingChange() {
            let id = this.basicForm.fkBuildingId;
            let buildingObj = this.building.filter((x) => {
                return x.pkBuildingId === id;
            })[0];

            this.basicForm.fkAdministrationId = buildingObj.fkAdministrativeOfficeId;
            this.basicForm.fkRegionId = buildingObj.areaNumberId;
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        submitForm() {
            this.$refs["basicForm"].validate((valid) => {
                if (valid) {
                    this.hasSubmit = true;
                    this.$refs['upImg'].submit().then(res => {
                        if (this.isUpdate) {
                            updateMaintenanceRecords(this.basicForm).then((res) => {
                                if (res.code === 10000) {
                                    this.$message.success(res.msg);
                                    this.colse();
                                }
                            }).finally(_ => {
                                this.hasSubmit = false;
                            });
                        } else {
                            addMaintenanceRecords(this.basicForm).then((res) => {
                                if (res.code === 10000) {
                                    this.$message.success(res.msg);
                                    this.colse();
                                }
                            }).finally(_ => {
                                this.hasSubmit = false;
                            });
                        }
                    });
                };
            });
        },
        colse() {
            this.$router.push("/repair/list");

            //let rex = this.$route.matched[this.$route.matched.length - 1].regex;
            //this.$store.commit("delTabs", rex);
        },
        Init() {
            this.loadSelect();
            getOneAll(selectNameToId('area')).then(res => {
                this.area = res.data;
            });
            getTwoAll(selectNameToId('adminOffice')).then(res => {
                this.property = res.data;
            });
            if (this.$route.params.id) {
                this.loading = true;
                this.isUpdate = true;
                this.loadData(this.$route.params.id);
            }
        }
    },
    mounted() {
        this.Init();
    },
};
</script>
